<template>
  <el-select class="AddUserDialog__select-user"
                 v-model="selectedUserId"
                 filterable
                 remote
                 :remote-method="searchUserList"
                 :loading="selectLoading"
                 placeholder="请输入用户编码或用户名称"
  size="medium" @change="getSelectChangeDataEvent">
        <el-option
          v-for="item in userOptions" 
          :key="item.userId"
          :label="item.fullName"
          :value="item.userId"
          class="AddUserDialog__select-option">
          
        <i class="el-icon-lx-peoplefill AddUserDialog__avatar"></i>
          <div style="float: left;">
            <strong class="text-grey-8">{{ item.fullName }}</strong>
            <span class="AddUserDialog__select-username text-lb-65">{{ item.userCode }}</span>
          </div>
          <i class="text-grey-8 el-icon-plus"
             style="float: right;line-height: 34px;"></i>
          <span style="float: right;"></span>
        </el-option>
      </el-select>  
</template>
<script>
import {queryFullName_Url} from  "@/config/compentsapi";
export default {
   name: 'addUserInput',
    /*子组件接收父组件传值*/
   props:{
       msg: {
      type: String
      }
   },
   data(){
       return{
            dialogVisible: false,
            selectedUserId: '',
            selectLoading: false,
            userOptions: [],
            dialogLoading: false,
            userDesc:''
       }
   },
   computed(){

   },
   created () {
      //  console.log("父组件向子组件传递的值为："+this.msg)
   },
   methods:{
       create(){
            this.selectedUserId = ''
            this.userOptions = []
            this.dialogVisible = true
       },
       searchUserList(qrydesc){/*远程搜索方法*/
           if(qrydesc !='')
           {
               this.selectLoading = true
               queryFullName_Url({
                   fullName:qrydesc,
                   pageNo:1
               }).then(res =>{
                  //  console.log("输入框查询出全部人员======>>>"+JSON.stringify(res.data));
                   this.userOptions = res.data.records;
                   this.selectLoading = false;
               })
           }else{
                this.userOptions = [];
           }
       },
       /*将子组件的值传递至父组件*/
       getSelectChangeDataEvent(){
           this.$emit("listenToChildEvent",this.selectedUserId);
       }
   }

}
</script>
<style>
  .AddUserDialog__select-user{
    width: 97%;
  }
  .AddUserDialog__select-option.is-disabled {
    opacity: 0.5;
  }
  .AddUserDialog__avatar {
    width: 24px;
    height: 24px;
    float: left;
    border-radius: 3px;
    color: #dadada;
    margin: 5px 10px 5px 0;
  }
  .AddUserDialog__select-username {
    font-size: 12px;
  }
  .AddUserDialog__roles {
    margin-top: 20px;
  }
  .AddUserDialog__button-append {
    width: 100%;
    margin-top: 20px;
  }
</style>
